<!DOCTYPE html>
<html>

<head>
    <title>北京站网格化系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fonts -->
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/js/jquery-treegrid-master/jquery.treegrid.css">
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="../lib/css/common/style.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/common/themes/flat-blue.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/common/newstyle.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/zc-common.css">
    
</head>

<body class="flat-blue">
    <div class="app-container expanded">
        <div class="row content-container">
            <nav class="navbar navbar-default navbar-fixed-top navbar-top">
                <div class="container-fluid app-header">
                    <div class="navbar-header">
                        <button type="button" class="navbar-expand-toggle fa-rotate-90">
                            <i class="fa fa-bars icon"></i>
                        </button>
                        <top-nav></top-nav>
                    </div>
                    <right-info></right-info>
                </div>
            </nav>
            <div class="side-menu-wrap">
                <side-menu></side-menu>
            </div>
            <!-- Main Content -->
            <div class="container-fluid">
                <div class="side-body padding-top">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="card">
                                <div class="elm-wrap">
                                    <div class="alert alert-info" role="alert">
                                        不同的角色可以设置不同的角色权限。
                                    </div>
                                </div>
                                <div class="elm-wrap role-el">
                                    <div class="row">
                                        <div class="col-sm-4">
                                            <div class="elm-card" v-for="role in roles" @click="showRight(role)" :class="{active:role[roleId] == accRole[roleId]}">
                                                <div class="row">
                                                    <div class="col-sm-8">
                                                        <p class="title">{{role[roleName]}}</p>
                                                    </div>
                                                    <div class="col-sm-4">
                                                        <div class="btngroup"><a href="" @click.prevent.stop="editing(role)">编辑</a> | <a href="" @click.prevent="deling(role)">删除</a></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="elm-card elm-card-add" @click="editing()">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <p class="title">+</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-8">
                                            <form action="" class="right-form">
                                                <div class="form-group form-inline">
                                                    <label for="inputName" class=" control-label">角色名：</label>
                                                    <input v-focus="editable" type="text" name="rolename" class="form-control" id="inputName" placeholder="角色名" :readonly="!editable" :value="accRole[roleName]">
                                                    <span v-show="!validate.name" class="form-control-static font-alert"> {{validate.validNameTxt}}</span>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox3 checkbox-info checkbox-check checkbox-round  checkbox-light" v-for="(right,index) in rightList" :key="index">
                                                            <input type="checkbox" :value="right[rightId]" name="roleright" :id="'c'+index" :checked="rightCheck(right)" :disabled="!editable">
                                                            <label :for="'c'+index">
                                                                {{right[rightText]}}
                                                            </label>
                                                    </div>
                                                    <p class="form-control-static font-alert" v-show="!validate.rights">
                                                        请赋予该角色的权限！    
                                                    </p>                                                   
                                                </div>
                                                <div class="form-group" v-if="editable">
                                                        <button type="button" @click.prevent="subData" class="btn btn-sm btn-info">确认</button>
                                                        <button type="button" @click.prevent="editable = !editable" class="btn btn-sm btn-default">取消</button>
                                                </div>
                                            </form>
                                           
                                        </div>
                                    </div>
                                     
                                </div> 
                            </div>
                             
                        </div>   
                    </div>
                </div>
            </div>
            
        </div>
        <footer class="app-footer">
            <div class="wrapper"></div>
        </footer>
        <div class="modal fade" id="modalDel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">删除角色</h4>
                    </div>
                    <div class="modal-body">
                        确定删除该角色么？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" onclick="deling()" class="btn btn-info">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="modalTips" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel3">提示</h4>
                    </div>
                    <div class="modal-body">
                        温馨提示
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- Javascript Libs -->
<script type="text/javascript" src="../lib/js/jquery.min.js"></script>
<script type="text/javascript" src="../lib/js/common/base.js"></script>
<script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib/js/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="../lib/js/jquery.matchHeight-min.js"></script>
<script type="text/javascript" src="../lib/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../lib/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
<script type="text/javascript" src="../lib/js/jquery-treegrid-master/jquery.treegrid.min.js"></script>
<script type="text/javascript" src="../lib/js/jquery-treegrid-master/jquery.treegrid.bootstrap3.js"></script>
<script type="text/javascript" src="../lib/js/jquery-treegrid-master/jquery.treegrid.extension.js"></script>
<script src="../lib/js/vue.js"></script>
<!-- <script type="text/javascript" src="../lib/js/ace/ace.js"></script>
<script type="text/javascript" src="../lib/js/ace/mode-html.js"></script>
<script type="text/javascript" src="../lib/js/ace/theme-github.js"></script> -->
<!-- Javascript -->
<script type="text/javascript" src="../lib/js/common/app.js"></script>
<!-- Javascript -->
<script>
    navData.accNav1 = 'organization'
    navData.nav1Name = '组织管理'
    navData.accNav2 = 'organization-base'
    navData.accNav3 = '1'
    var navVue = new Vue({
        el:'.side-menu-wrap' 
    })
    var navTopVue = new Vue({
        el:'.app-header' 
    })
    var vm = new Vue({
        el:'.role-el',
        data:{
            roleName:'role_name',
            roleId:'role_id',
            roleRights:'rights',
            rightText:'intro_name',
            rightId:'intro_id',
            editType:'1',
            editable:false,
            accRole:{
                role_id:'',
                role_name:'',
                rights:[]
            },
            validate:{
                name:true,
                rights:true,
                validNameTxt:'角色名不能为空！'
            },
            roles:[],
            rightList:[]
        },
        beforeCreate:function(){
            var that=this
            $.ajax({
                url:serverUrl.base+serverUrl.user+'intro_list',
                type:"post",
                data:{
                    _:Math.random()
                },
                dataType:"json",
                success:function(res){
                    that.rightList=res.data
                },
                complete:function(res){
                    $('body').loading('close')                 
                }
            })
            $.ajax({
                url:serverUrl.base+serverUrl.user+'role_list',
                type:"post",
                data:{
                    _:Math.random()
                },
                dataType:"json",
                success:function(res){
                    that.roles=res.data
                },
                complete:function(res){
                    $('body').loading('close')                      
                }
            })
            
        },
        computed:{
            
        },
        methods:{
            editing:function(role){
                this.validate.validNameTxt='角色名不能为空！'
                this.editable = true
                if(role){
                    this.editType='1'
                    this.accRole = role
                }else{
                    this.editType='2'
                    this.accRole={}
                    this.accRole[this.roleId]=''
                    this.accRole[this.roleName]=''
                    this.accRole[this.roleRights]=[]
                }
            },
            deling:function(role){
                this.editable = true;
                this.accRole = role;
                $('#modalDel').modal()
            },
            showRight:function(role){
                //点击角色时呈现该角色的权限列表
                this.accRole = role
                this.editable = false
            },
            rightCheck:function(right){
                //呈现当前角色权限的情况
                var _id = right[this.rightId]
                return this.accRole[this.roleRights].some(function(v){
                    return v == _id
                })
            },
            subData:function(){
                var _datas = $(".right-form").serializeArray();
                var that = this,_accRole=this.accRole
                $.each(_datas,function(ids,elem){
                    if(elem.name == 'rolename'){
                        _accRole[that.roleName] = elem.value
                    }else if(elem.name == 'roleright'){
                        _accRole[that.roleRights].push(elem.value)
                    }
                })
                $.trim(_accRole[this.roleName])==''?this.validate.name=false:this.validate.name=true
                _accRole[this.roleRights].length == 0?this.validate.rights=false:this.validate.rights=true

                if(this.validate.name && this.validate.rights){
                    $('.side-body').loading('open')
                    $.ajax({
                        url:serverUrl.base+serverUrl.user+'edit_role',
                        type:"post",
                        data:_accRole,
                        dataType:"json",
                        success:function(res){
                            if(res.code == 0){
                                if(res.data){
                                    _accRole[that.roleId] = res.data.role_id;
                                    that.roles.push(_accRole)  
                                }
                                $("#modalTips").find('.modal-title').text('成功') 
                                var _txt = '角色编辑成功！'
                                if(that.editType == '2'){
                                    _txt = '角色添加成功！'
                                }
                                $("#modalTips").find('.modal-body').text(_txt)
                            }else if(res.code == '2'){
                                $("#modalTips").find('.modal-title').text('出现问题') 
                                $("#modalTips").find('.modal-body').text(res.info)
                            }
                            setTimeout(function(){
                                $("#modalTips").modal()    
                            },500)
                        },
                        complete:function(res){
                            $('.side-body').loading('close')
                        },
                        error:function(res){
                            $("#modalTips").find('.modal-title').text('出现问题') 
                            $("#modalTips").find('.modal-body').text(res.info)
                            setTimeout(function(){
                                $("#modalTips").modal()    
                            },500)
                        }
                    })
                }else{
                    return false;
                }
                this.editable = false
            }
            
        },
        directives: {
            focus: function(el, binding) {
                if (binding.value) {
                    el.focus()
                }
            }
        }

    })
    function deling(){
        var _delingid = vm.accRole[vm.roleId]
        $.ajax({
            url:serverUrl.base+serverUrl.user+'del_role',
            type:"post",
            data:{role_id:_delingid},
            dataType:"json",
            success:function(res){
                if(res.code == 0){
                    var newRoles = vm.roles.filter(function(v){
                        return v[vm.roleId] !=_delingid
                    })
                    vm.roles = newRoles
                    $("#modalTips").find('.modal-title').text('成功')   
                    $("#modalTips").find('.modal-body').text('角色删除成功！')
                }else if(res.code == '2'){
                    $("#modalTips").find('.modal-title').text('出现问题') 
                    $("#modalTips").find('.modal-body').text(res.info)
                }
                setTimeout(function(){
                    $("#modalTips").modal()    
                },500)

            },
            complete:function(res){
                $('#modalDel').modal('hide')
                $('.right-form').loading('close')
            },
            error:function(res){
                $("#modalTips").find('.modal-title').text('出现问题') 
                $("#modalTips").find('.modal-body').text(res.info)
                setTimeout(function(){
                    $("#modalTips").modal()    
                },500)
            }
        })
    }
</script>
</body>

</html>
